<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>发起申请</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{ height: 50px; top:0; background:#fff; }
.g-back{ float: left; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{float: right;width: 80px; height: 50px;line-height: 50px;text-align: center;color:#2bb1ff;font-size: 14px; }
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*内容*/
.page-wrap{ height: 100%; width: 100%; background:#f8f8f8;overflow-y: auto; }
.p-list1{position:relative;display:block;padding:0 18px;margin:10px 0;min-height:50px;font-size: 14px; background: #fff; overflow: hidden; }
.p-list1 .left{position: absolute; width: 100px; left:18px;top:0;height: 50px;line-height:50px;}
.p-list1 .right{margin:0; display:block;padding-left: 100px; width:100%;height:100%;line-height:50px;font-size: 14px; text-align: right;}
input{ height: 50px !important; }
textarea{width: 100%; padding:50px 18px 5px 18px; font-size: 15px; font-family: inherit; }
.n-w{ padding-left:30px; background:url(../img/w1_03.png) 10px center no-repeat; background-size: 13px;  }
.n-w.active{  background-image:url(../img/x1_03.png); background-size: 13px;  }
/*底部信息*/
.botm{  margin: 20px 0;}
.botm a{  display: block; width: 90%; line-height: 45px; margin:0 auto;border-radius: 3px; background: #2bb1ff; color:#fff; 
  text-align: center; font-size: 15px;}
/*辅助类*/
.g-left{padding-right:16px; background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }
.g-down{padding-right:16px; background:url(../img/down_06.png) right center no-repeat; background-size: 14px 8px; }
.g-up{padding-right:16px; background:url(../img/up_03.png) right center no-repeat; background-size: 13px 7px; }
.color1{ color: #2bb1ff; }
.color2{ color: #c8c8c8; }
/*标记*/
.p-close{ position: absolute;top:0;right: 0; width:15px;height:15px;
  background: url(../img/xx_03.png) no-repeat ; background-size:15px;}
.p-biaoji{ background:#fff url(../img/bx_03.png) 10px 22px no-repeat; background-size:9px; }
/*模态框*/
.mo{display: none; position: absolute; top:0; left: 0; z-index: 188;width: 100%;height: 100%;background: rgba(0,0,0,0.5); }
.mo ul{ width: 200px;max-height: 350px;overflow: auto; padding:13px 0; margin:75px auto; border-radius: 5px; background:#fff;}
.mo a{ display: block; padding-left: 75px; width: 100%; height: 35px;line-height: 35px; font-size: 16px; color: inherit; background: url(../img/qx_03.png) 30px center no-repeat;background-size:20px;}
.mo .active{ background-image: url(../img/xz_03.png);background-size:20px;}
/*日历组件样式更改*/
#layui-laydate1{ width: 100%;left:0 !important; }
.layui-laydate-main{width: 100% !important;}
table{width:100%}

.xuanze-list{ padding:0;  margin-top:50px;   display: none;  }
.xuanze-list li{  line-height: 35px; color:#666;  }
</style>
</head>
<body>
<div class="page-container">
    <div class="weui-tab">
           <!-- 头部 -->
            <div class="weui-navbar page-top">
                    <a  href="javascript:history.back(-1);" class="g-back"></a>                   
                    <span class="t-title">教师评课</span>  
                    <a  class="g-other" id="pke-select">选择</a>
            </div>
            <!-- 内容区 -->
            <div class="weui-tab__bd page-wrap" > 
                    <!-- <a class="p-list1 p-biaoji">
                        <span class="left">评价选择</span>
                        <span class="right color2 g-up" id="pke-select">请选择</span>
                    </a> -->

                    <a class="p-list1 p-biaoji next0">
                        <span class="left">课题名称</span>
                        <input class="right" type="text" placeholder="请输入...">
                    </a>

                    <a class="p-list1 p-biaoji next0">
                        <span class="left">观课日期</span>
                        <input class="right"  type="text" id="time1" onfocus="this.blur();">
                    </a>
                   
                    <a class="p-list1 p-biaoji next0">
                        <span class="left">观课节次</span>
                        <span class="right color2 g-up selectBtn" >请选择</span>
                        <ul class="xuanze-list">
                              <li>第一节</li>
                              <li>第二节</li>
                              <li>第三节</li>
                              <li>第四节</li>
                        </ul>
                    </a>

                    <a class="p-list1 p-biaoji next0">
                        <span class="left">科目</span>
                        <span class="right color2 g-up selectBtn">请选择</span>
                        <ul class="xuanze-list">
                              <li>语文</li>
                              <li>数学</li>
                              <li>英语</li>
                              <li>物理</li>
                        </ul>
                    </a>

                    <a class="p-list1">
                        <span class="left">教学类型</span>
                        <span class="right color2 g-up selectBtn" id="">请选择</span>
                        <ul class="xuanze-list">
                              <li>多媒体教学</li>
                              <li>专家授课</li>
                        </ul>
                    </a>

                    <a class="p-list1 p-biaoji">
                         <span class="left">观课类型</span>
                         <div class="right">
                              <span class="n-w active">校内</span>
                               <span class="n-w">校外</span>                         
                         </div>
                    </a>

                    <a class="p-list1 p-biaoji">
                        <span class="left">教师授课</span>
                        <span class="right color2 g-up selectBtn" id="">请选择</span>
                        <ul class="xuanze-list">
                              <li>李晓老师</li>
                              <li>张三老师</li>
                              <li>王五老师</li>
                        </ul>
                    </a>

                    <a class="p-list1" >
                        <span class="left">年级班级</span>
                        <input class="right"  type="text" placeholder="请输入..." >
                    </a>

                    <a class="p-list1">
                        <span class="left">教学地点</span>
                        <input class="right"  type="text" placeholder="请输入...">
                    </a>


                    <a class="p-list1 p-biaoji">
                          <span class="left">评论</span>
                          <textarea name="" id="" cols="30" rows="6" placeholder="请输入请假理由..."></textarea>
                    </a>

                    <div class="botm">
                            <a href="../../index.html">提 &nbsp; &nbsp; &nbsp; &nbsp;交</a>
                    </div>
              </div>

      </div>
</div>

<!-- 模态框 -->
<div class="mo" id="pingke">
    <ul >
          <li><a class="active" href="###">教师评课</a></li>
          <li><a  href="###">学生成长记录</a></li>
          <li><a  href="###">课堂评价</a></li>
          <li><a  href="###">学生考评</a></li>
          <li><a  href="###">班级评价</a></li>
          <li><a  href="###">国旗下讲话</a></li>
          <li><a  href="###">教师成长记录</a></li>
          <li><a  href="###">教师考评</a></li>
    </ul>
</div>

</body>
<script src="../js/laydate.js"></script>
<script>
  // 时间日期控件
laydate.render({
  elem: '#time1',
  type: 'datetime', 
  format:"yyyy/MM/dd HH:mm"
});
// 评价选择
$("#pke-select").click(function(){
    $("#pingke").toggle();
    return false;
})
  //"请选择" 按钮
$(document).click(function(){
    $(".mo").hide();
})
$(".mo").find('a').click(function(){
    $("#pke-select").prev().text(this.innerHTML);
})
$(".mo").find("a").click(function(){
     $(this).parent().parent().find("a").removeClass("active");
     $(this).addClass("active")
})
// 校内,校外 点击
$('.n-w').click(function(){
     $('.n-w').removeClass("active");
     $(this).addClass("active");
})
// 下拉效果
$(".selectBtn").click(function(){
     if(  $(this).hasClass("g-up") ){
          $(this).removeClass("g-up").addClass("g-down")
          $(this).next().slideDown();
     }else{
         $(this).removeClass("g-down").addClass("g-up")
          $(this).next().slideUp();
     }
})
// 下拉框选择
$(".xuanze-list").find("li").click(function(){
      $(this).parent().prev().text( this.innerHTML );
      $(this).parent().prev().removeClass("g-down").addClass("g-up");
      $(this).parent().prev().css("color","#333");
      $(this).parent().slideUp();
      return false;
})
</script>
</html>